
<template>
	<view v-if="typeData" class="huocheType">
		<u-tabs :list="typeData" keyName="name" @click="changeBigType" :current="bigTypeIndex" v-if="mode!='read'"></u-tabs>
		<view class="bigType" v-else>{{typeData[bigTypeIndex].name}}</view> 
		<view class="vehicle_size" v-if="!(mode=='search' && bigTypeIndex == 0)">
			<u-checkbox-group v-model="vehicleTypeBox" placement="column">
				<u-radio-group v-model="vehicleTypeRadio" placement="column">
					<view class="vehicle_types">
						<view class="item" v-for="(item, index) in vehicle_types" :key="index" v-show="mode!='read' || item.checked">
							<image :src="item.img" mode="heightFix" />
							<view class="name" v-if="vehicle_types.length > 1 && mode!='read'">
								<u-checkbox :name="item.name" :label="item.name" v-if="!radioSecond"></u-checkbox>
								<u-radio :name="item.name" :label="item.name" v-if="radioSecond"></u-radio>
							</view>
							<view class="name" v-else>{{item.name}}</view>
						</view>
					</view>
				</u-radio-group>
        	</u-checkbox-group>

			<scroll-view :scroll-x="true" class="scroll-body">
				<u-checkbox-group v-model="vehicleTypeOptionBox" placement="column" :disabled="mode=='read'">
					<view class="items">
						<view class="item" v-for="(item, index) in vehicle_type_optional" :key="index" v-show="mode!='read' || item.checked">
							<view class="name">{{item.name}}(可选)</view>
							<view class="check"><u-checkbox :name="item.name" :label="item.name"></u-checkbox></view>
						</view>
						<view class="item" v-for="(item, index) in vehicle_size" :key="index">
							<view class="name">{{item.name}}</view>
							<view class="size">{{item.size}}</view>
						</view>
					</view>
				</u-checkbox-group>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	const VehicleDIR = {
		'carriage_length': {name: '厢长', unit: '米'},
		'carriage_width': {name: '厢宽', unit: '米'},
		'carriage_height': {name: '厢高', unit: '米'},
		'carriage_volume': {name: '载方', unit: '方'},
		'carriage_weight': {name: '载重', unit: '吨'},
		'carriage_full_height': {name: '整车高', unit: '米'},
	}
	export default {
		name: 'huocheType',
		props: {
			mode: {
				type: String,
				defualt: ''
			},
			initValue: {
				type: Object
			},
			radioSecond: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				typeData: '',
				bigTypeIndex: -1,
				vehicle_size: [],

				vehicle_types: [],
				vehicleTypeBox: [],
				vehicleTypeRadio: '',
				vehicle_type_optional: [],
				vehicleTypeOptionBox: [],
				
			};
		},
		options: { styleIsolation: 'shared' },
		watch: {
			vehicleTypeBox: function (v, o) {
				if (v.length == 0) {
					uni.$u.toast('至少要选中一个车厢类型哦');
					setTimeout(() => {
						this.vehicleTypeBox = o;
					}, 10);
				} else {
					this.confirmResult();
				}
			},
			vehicleTypeOptionBox: function () {
				this.confirmResult();
			}
		},
		mounted() {
			var vm = this;
			vm.getAndLoad('货车数据', '/mobile/wxJSON/huocheConfig.js', function (res) {
				if (vm.mode == 'search') {
					res = [{name: '全部', vehicle_size: {}, vehicle_std_item: []}].concat(res);
				}
				vm.typeData = res;
				if (vm.initValue) {
					var index = res.findIndex(n => n.name == vm.initValue.carTypeName);
					vm.vehicleTypeBox = vm.initValue.carSecondTypeName.split(',');
					vm.vehicleTypeOptionBox = vm.initValue.carThirdTypeName.split(',');
					vm.changeBigType({index: index});
				} else {
					vm.changeBigType({index: 0});
				}
			});
		},
		methods: {
			// 渲染属性
			getVehicleSize: function () {
				var vm = this;
				var vehicleSize = vm.typeData[vm.bigTypeIndex].vehicle_size;
				var keys = Object.keys(VehicleDIR);
				var vehicle_size = [];
				keys.forEach(n => {
					// debugger
					if (vehicleSize[n]) {
						var name = VehicleDIR[n].name;
						var minSize = vehicleSize[n].min;
						var maxSize = vehicleSize[n].max;
						var unit = VehicleDIR[n].unit;
						if (unit == '吨') {
							minSize = (minSize / 1000).toFixed(1);
							maxSize = (maxSize / 1000).toFixed(1);;
						}
						vehicle_size.push({
							name,
							size: minSize + '~' + maxSize + unit
						});
					}
				});
				vm.vehicle_size = vehicle_size;
			},
			getVehicleTypes: function () {
				var vm = this;
				var item = vm.typeData[vm.bigTypeIndex];
				// 必选属性
				var vehicle_std_item = item.vehicle_std_item.filter(n => n.img);
				if (vehicle_std_item.length) {
					vehicle_std_item.forEach(n => {
						n.checked = vm.vehicleTypeBox.includes(n.name);
					})
					vm.vehicle_types = vehicle_std_item;
				} else {
					vm.vehicle_types = [{
						img: item.image_url_high_light,
						name: item.name,
						checked: true
					}];
				}

				vm.vehicleTypeRadio = vm.vehicle_types[0].name;

				// 可选属性
				var vehicle_std_item2 = item.vehicle_std_item.filter(n => !n.img);
				vm.vehicle_type_optional = vehicle_std_item2.map(n => {
					return {name: n.name, checked: vm.vehicleTypeOptionBox.includes(n.name)};
				});
				if (vm.mode != 'read') {
					vm.vehicleTypeBox = vm.vehicle_types.map(n => n.name);
					vm.vehicleTypeOptionBox = [];
				}
			},
			changeBigType: function (v) {
				this.bigTypeIndex = v.index;
				this.getVehicleSize();
				this.getVehicleTypes();
				this.confirmResult();
			},
			confirmResult: function () {
				var vm = this;
				if (vm.emitTimeout) {
					clearTimeout(vm.emitTimeout);
				}
				vm.emitTimeout = setTimeout(() => {
					var item = vm.typeData[vm.bigTypeIndex];
					var result = item.name;
					var type = this.radioSecond ? this.vehicleTypeRadio : this.vehicleTypeBox.join(',');
					var option = this.vehicleTypeOptionBox.join(',');
					this.$emit('confirm', result + ':' + type + ':' + option);
					console.log(result + ':' + type + ':' + option);
				}, 200);
				
			}
        }
	}
</script>


<style lang="scss" scoped>
.huocheType {
	width: 690rpx;
	overflow: hidden;
	.bigType  {
		font-size: 28rpx;
		float: right;
		position: absolute;
		right: 20rpx;
		top: 14rpx;
		border-bottom: 4rpx solid #999;
	}
		.scroll-body {
			border-radius: 30rpx;
			width: 690rpx;
			background: #f1f1f1;
			.items {
				display: flex;
				padding: 10rpx 20rpx;
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin: 0 20rpx;
					padding: 20rpx 0;
					.name {
						font-size: 26rpx;
						white-space: nowrap;
						color: #989898;
						margin-bottom: 10rpx;
					}
					.size {
						font-size: 24rpx;
						white-space: nowrap;
						color: #000;
					}
					.check /deep/{
						.u-checkbox__icon-wrap {
							width: 28rpx !important;
							height: 28rpx !important;
						}
						.u-checkbox >text {
							font-size: 26rpx !important;
							color: #000 !important;
						}
					}
				}
			}
		}
		.vehicle_size {
			margin-bottom: 10rpx;
		}
		.vehicle_types {
			display: flex;
   			justify-content: space-evenly;
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 14rpx 0;
				image {
					height: 90rpx;
				}
				.name {
					margin-top: 10rpx;
					/deep/{
						.u-checkbox__icon-wrap {
							width: 28rpx !important;
							height: 28rpx !important;
						}
					}
				}
			}
		}
}
</style>
